要让Chrome支持小于12px的文字，可以尝试以下几种方法：

一、使用CSS的transform属性

这是最常用的方法，通过缩放元素（包括其中的文字）来绕过浏览器的最小字体限制。例如，可以将一个元素的字体大小设置为12px（或Chrome允许的最小字体大小），然后使用transform: scale()来缩小它。具体CSS代码如下：

.small-text {
  font-size: 12px; /* 设置为Chrome允许的最小字体大小 */
  transform: scale(0.8); /* 缩小到80%，相当于9.6px */
  transform-origin: left top; /* 设置缩放的基点，保持文本位置不变 */
}

优点：

• 简单易用，兼容性好。

缺点：

• 缩放后的文字可能会略微模糊，因为它是通过缩放实现的，而不是真正地改变字体大小。
• 缩放会影响元素的布局，需要仔细调整。

二、修改Chrome浏览器设置

用户可以在Chrome的设置中更改最小字体大小，但这只会影响当前用户的Chrome设置，并不适用于网站上所有用户的浏览器。具体步骤如下：

1. 打开Chrome浏览器，点击右上角的三个点，打开菜单。
2. 选择“设置”。
3. 滚动到页面底部，点击“高级”。
4. 在“外观”部分，找到“字体大小”。
5. 点击“自定义字体”的选项。
6. 在“最小字体大小”选项中，将字体大小调整为你想要的最小值。

三、覆盖用户代理样式表

Chrome浏览器有一个默认的用户代理样式表，它会覆盖网站的某些样式。尽管不推荐这样做，但可以通过覆盖这些样式来强制显示小于12px的文本。例如：

small {
  font-size: 10px !important; /* 使用!important规则强制应用这个样式 */
}

注意：

• !important规则可以强制应用这个样式，但它可能会导致样式表中的其他样式冲突，降低CSS的可维护性。

四、使用SVG

SVG（可缩放矢量图形）可以渲染任意大小的文字，不受浏览器最小字体限制的影响。但使用SVG会增加代码的复杂度，并且在处理文本换行和对齐方面可能会有一些挑战。例如：

<svg viewBox="0 0 100 20">
  <text x="0" y="15" font-size="10">小于12px的文字</text>
</svg>

五、使用图片

如果文字内容是固定的，可以将文字制作成图片，然后在网页中显示图片。这种方法可以精确控制文字的大小和样式，但会增加额外的HTTP请求，并且不利于SEO。

六、使用-webkit-text-size-adjust属性（不推荐）

-webkit-text-size-adjust属性可以禁用Chrome的最小字体限制，允许显示小于12px的文字。但强烈不推荐使用这种方法，因为它会严重影响网页的可访问性，使视力较差的用户难以阅读。例如：

.small-text {
  font-size: 10px;
  -webkit-text-size-adjust: none; /* 不推荐 */
}

注意事项

• 在尝试使用小于12px的字体时，务必考虑网站的可访问性和用户体验。非常小的文本可能对视力不佳的用户或在高分辨率设备上的用户造成困难。
• 确保提供适当的缩放和辅助功能选项，以支持所有用户。

综上所述，虽然有多种方法可以让Chrome支持小于12px的文字，但最佳实践是避免使用过小的字体大小，以确保所有用户都能轻松阅读和理解网页内容。如果必须使用小字号文本，建议优先考虑其他设计方案，如调整布局或使用不同的字体。